<%--
     商品编辑页面
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
    <script src="/layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/layui-v2.4.5/layui/css/layui.css" media="all">
    <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>

</head>
<body>
<form id="myForm" class="layui-form" action="/shop/saveCommodity">

    <input id="id" name="id" value="${record.id}" type="hidden">
    <input id="imgPath" name="imgPath" value="${record.imgPath}" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required"  maxlength="20"
                   placeholder="请输入名称" autocomplete="off" class="layui-input" value="${record.name}">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
            <input type="text" name="hotNumber" required lay-verify="required|number"  maxlength="20"
                   placeholder="请输入名称" autocomplete="off" class="layui-input" value="${record.hotNumber}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属景区</label>
        <div class="layui-input-block">
            <input type="text" name="spotName" required lay-verify="required"  maxlength="20"
                   placeholder="请输入名称" autocomplete="off" class="layui-input" value="${record.spotName}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">门票类型</label>
        <div class="layui-input-block">
            <input type="text" name="personType" required lay-verify="required"  maxlength="20"
                   placeholder="请输入名称" autocomplete="off" class="layui-input" value="${record.personType}">
        </div>
    </div>




    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">售价</label>
            <div class="layui-input-inline">
                <input type="tel" name="money" lay-verify="required|number" value="${record.money}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">原价</label>
            <div class="layui-input-inline">
                <input type="text" name="originalMoney" lay-verify="required|number" value="${record.originalMoney}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-inline">
                <input type="tel" name="inventory" lay-verify="required|number" value="${record.inventory}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">销量</label>
            <div class="layui-input-inline">
                <input type="tel" name="salNum" lay-verify="required|number" value="${record.salNum}" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div id="ticketType">
        <c:if test="${!empty record.sku}">
            <c:forEach items="${record.sku}" var="sku" varStatus="status">
                <div class="layui-form-item" >
                    <label class="layui-form-label">票价</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="paioMoney" lay-verify="required|number" autocomplete="off"  value="${sku.money}" placeholder="请输入商品现价 （元）" class="layui-input">
                    </div>
                    <label class="layui-form-label">人员类型</label>
                    <div class="layui-input-inline">
                        <select name="manIds" lay-verify="required" lay-search="">
                            <option value="">请选择类型</option>
                            <c:forEach items="${peopleTypeList}" var="aa">
                                <option value="${aa.id}"  <c:if test="${aa.id==sku.ticket_person_typeId}">selected</c:if>>${aa.personType}</option>
                            </c:forEach>

                        </select>
                    </div>
                    <label class="layui-form-label">票种</label>
                    <div class="layui-input-inline">
                        <select name="ticket_types" lay-verify="required" lay-search="">
                            <option value="">请选择票种</option>
                            <c:forEach items="${ticket_typeList}" var="piaozhong">
                                <option value="${piaozhong.id}"   <c:if test="${piaozhong.id==sku.ticket_typeId}">selected</c:if>>${piaozhong.typeName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <label class="layui-form-label">取票方式</label>
                    <div class="layui-input-inline">
                        <select name="method" lay-verify="required" lay-search="">
                            <option value="">请选择取票方式</option>
                            <c:forEach items="${ticket_methodList}" var="method">
                                <option value="${method.id}"   <c:if test="${method.id==sku.ticket_methodId}">selected</c:if>>${method.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <c:if test="${status.index == 0}">
                        <div class="layui-input-inline">
                            <span class="layui-btn layui-btn-normal" id="addType" ><i class="layui-icon">&#xe608;</i>  添加</span>
                        </div>
                    </c:if>
                    <c:if test="${status.index > 0}">
                        <div class="layui-input-inline">
                            <span class="layui-btn layui-btn-normal" onclick="delTtpe(this)" ><i class="layui-icon"></i> 删除</span>
                        </div>
                    </c:if>


                </div>
            </c:forEach>
        </c:if>

        <c:if test="${empty record.sku}">
            <div class="layui-form-item" >
                <label class="layui-form-label">票价</label>
                <div class="layui-input-inline">
                    <input type="tel" name="paioMoney" lay-verify="required|number" autocomplete="off"  value="${sku.money}" placeholder="请输入商品现价 （元）" class="layui-input">
                </div>
                <label class="layui-form-label">人员类型(小程序使用)</label>
                <div class="layui-input-inline">
                    <select name="manIds" lay-verify="required" lay-search="">
                        <option value="">请选择类型</option>
                        <c:forEach items="${peopleTypeList}" var="aa">
                            <option value="${aa.id}"  <c:if test="${aa.id==sku.ticket_person_typeId}">selected</c:if>>${aa.personType}</option>
                        </c:forEach>

                    </select>
                </div>

                <label class="layui-form-label">票种</label>
                <div class="layui-input-inline">
                    <select name="ticket_types" lay-verify="required" lay-search="">
                        <option value="">请选择票种</option>
                        <c:forEach items="${ticket_typeList}" var="piaozhong">
                            <option value="${piaozhong.id}"   <c:if test="${piaozhong.id==sku.ticket_typeId}">selected</c:if>>${piaozhong.typeName}</option>
                        </c:forEach>
                    </select>
                </div>
                <label class="layui-form-label">取票方式</label>
                <div class="layui-input-inline">
                    <select name="method" lay-verify="required" lay-search="">
                        <option value="">请选择取票方式</option>
                        <c:forEach items="${ticket_methodList}" var="method">
                            <option value="${method.id}"   <c:if test="${method.id==sku.ticket_typeId}">selected</c:if>>${method.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <span class="layui-btn layui-btn-normal" id="addType" ><i class="layui-icon">&#xe608;</i>  添加</span>
                </div>


            </div>
        </c:if>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select name="state" lay-verify="" lay-search>
                <option value="0" <c:if test="${0==record.state}">selected</c:if>>未上架</option>
                <option value="1" <c:if test="${1==record.state}">selected</c:if>>上架中</option>
                <option value="2" <c:if test="${2==record.state}">selected</c:if>>已下架</option>

            </select>
        </div>
    </div>
    <%--<div class="layui-form-item">--%>
    <%--<label class="layui-form-label">类别</label>--%>
    <%--<div class="layui-input-block">--%>
    <%--<select name="classId" lay-verify=""    lay-search>--%>
    <%--<c:forEach items="${fenleiList}" var="fen">--%>

    <%--<option value="${fen.id}" <c:if test="${fen.id==record.classId}">selected</c:if>> ${fen.name}</option>--%>
    <%--</c:forEach>--%>
    <%--</select>--%>
    <%--</div>--%>
    <%--</div>--%>


    <div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-inline">
            <select name="quiz1"   lay-verify="required" lay-filter="switchTest">
                <option value="">请选择类别</option>
                <c:forEach items="${oneClass}" var="fen">

                    <option value="${fen.id}" <c:if test="${fen.id==one.id}">selected</c:if>> ${fen.name}</option>
                </c:forEach>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="classId"  lay-verify="required" id="twoClass">
                <c:if test="${!empty twoClass}" >
                    <option value="${twoClass.id}"> ${twoClass.name}</option>
                </c:if>

            </select>
        </div>

        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">一级分销利润</label>
        <div class="layui-input-block">
            <input type="text" name="oneprofits" required lay-verify="required"
                   placeholder="请输入本品的分销利润" autocomplete="off" class="layui-input"   <c:if test="${!empty record.oneprofits}">value="${record.oneprofits}"</c:if>  <c:if test="${empty record.oneprofits}">value="0"</c:if>>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二级分销利润</label>
        <div class="layui-input-block">
            <input type="text" name="twoprofits" required lay-verify="required"
                   placeholder="请输入本品的分销利润" autocomplete="off" class="layui-input" <c:if test="${!empty record.twoprofits}">value="${record.twoprofits}"</c:if>  <c:if test="${empty record.twoprofits}">value="0"</c:if>>
        </div>
    </div>
    <%--<div class="layui-form-item">--%>
    <%--<label class="layui-form-label">满减包邮</label>--%>
    <%--<div class="layui-input-block">--%>
    <%--<input type="text" name="address" required lay-verify="required"--%>
    <%--placeholder="请输入本品的分销利润" autocomplete="off" class="layui-input" value="${record.address}">--%>
    <%--</div>--%>
    <%--</div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">抢购到期时间(可选填):</label>
        <div class="layui-input-inline">
            <input type="text" name="snapTime" id="date"  placeholder="选择抢购日期"  value="${record.snapTime}" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">有效期结束时间:</label>
        <div class="layui-input-inline">
            <input type="text" name="endTime" id="date1"  placeholder="选择结束日期"  value="${record.endTime}" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">身份证号是否必填</label>
            <div class="layui-input-inline">
                <select name="isNeedIdnumber" lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    <option value="0"  <c:if test="${'0'==record.isNeedIdnumber}">selected</c:if>>不必填</option>

                    <option value="1" <c:if test="${'1'==record.isNeedIdnumber}">selected</c:if>>必填</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">收货地址是否必填</label>
            <div class="layui-input-inline">
                <select name="isNeedAddress" lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    <option value="0" <c:if test="${'0'==record.isNeedAddress}">selected</c:if>>不必填</option>
                    <option value="1" <c:if test="${'1'==record.isNeedAddress}">selected</c:if>>必填</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">是否发送核销短信</label>
            <div class="layui-input-inline">
                <select name="writeoff" lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    <option value="0" <c:if test="${'0'==record.writeoff}">selected</c:if>>发送</option>
                    <option value="1" <c:if test="${'1'==record.writeoff}">selected</c:if>>不发送</option>
                </select>
            </div>
        </div>


    </div>
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" required
                   placeholder="请输入商品描述" autocomplete="off" class="layui-input" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-item" style="margin-left: 7rem">
            <div class="layui-upload" id="container">
                <button type="button" class="layui-btn" id="pickfiles">商品logo</button>
                <input type="hidden"  id="qiniuKey" value="/ticketlogo/">
                <input type="hidden" id="logo" name="ticketlogo" value="${record.logo}">

                <div class="layui-upload-list">
                    <img class="layui-upload-img"
                         src="${record.logo}"
                         id="demo1" style="height: 6rem;width: 6rem">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

        <div class="layui-upload"  style="margin-left: 7rem">

            <button type="button" class="layui-btn" id="test2">商品轮播图：</button>
            <input autocomplete="off" type="hidden" name="goodDescImgs" l id="goodDescImgs" value="">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo2"></div>
            </blockquote>
        </div>
    </div>


    <input type="hidden" id="logoPath" name="logoPath" >

    <input type="hidden" id="describe" name="describe" value="123">

    <script>


        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;
            //多图片上传
            upload.render({
                elem: '#test2'
                ,url: '/adminSystem/callBackImages'
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $.ajax({
                            url: '/qiniu/uploadImages',
                            type: 'POST', //GET
                            async: false,    //或false,是否异步
                            data: {
                                images: result.split(",")[1],
                                key:"/lunbotu/"
                            },
                            timeout: 50000,    //超时时间
                            dataType: 'text',    //返回的数据格式：json/xml/html/script/jsonp/text
                            success: function (data) {
                                var  descImgs=$("#goodDescImgs").val();
                                if(descImgs) {
                                    descImgs += "|" + data;
                                }else {
                                    descImgs+=data
                                }
                                $("#goodDescImgs").val(descImgs);
                            },
                        });
                        $('#demo2').append('<img WIDTH="92PX" HEIGHT="92PX" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    });
                }
                ,done: function(res){
                    //上传完毕
                }
            });

        });

    </script>

    <script>
    </script>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
        </div>
    </div>
</form>

<script>
    //轮播图返显
    $(function () {
        var imgPath='${record.imgPath}'
        if(imgPath){
            var img=imgPath.split("|")
            var  descImgs=""
            for(var i=0;i<img.length;i++){
                $('#demo2').append('<img WIDTH="92PX" HEIGHT="92PX" src="'+ img[i] +'"  class="layui-upload-img">')


                if(i==0) {
                    descImgs += img[i];
                }else {
                    descImgs += "|" + img[i];
                }

            }
            $("#goodDescImgs").val(descImgs);
        }
    })
    //Demo
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#date1',
            type:'datetime'
        });


        //监听商品分类
        form.on('select(switchTest)', function(data){
            var oneClassId=data.value;



            $.ajax({
                url: '/shop/twolevelClass',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    parentId: oneClassId
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                beforeSend: function (xhr) {
                    /*console.log(xhr)
                     console.log('发送前')*/
                },
                success: function (data) {

                    if(data){
                        var item=""
                        for(var i=0;i<data.length;i++){
                            console.log(data)
                            var twoClassId=data[i].id
                            item+="<option value=\""+twoClassId+"\">"+data[i].name+"</option>";


                        }
                        $("#twoClass").html(item)

                    }

                    form.render();



                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete: function () {
                    //console.log('结束')
                }
            });

            // layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
            //     offset: '6px'
            // });
            // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });
        //添加类型按钮
        $(document).on('click','#addType',function(){
            var  item="<div class=\"layui-form-item\" >\n" +
                "<label class=\"layui-form-label\">票价</label>\n" +
                "            <div class=\"layui-input-inline\">\n" +
                "                <input type=\"tel\" name=\"paioMoney\" lay-verify=\"required|number\" autocomplete=\"off\" placeholder=\"请输入商品现价 （元）\" class=\"layui-input\">\n" +
                "            </div>\n" +
                "            <label class=\"layui-form-label\">类型</label>\n" +
                "            <div class=\"layui-input-inline\">\n" +
                "                <select name=\"manIds\" lay-verify=\"required\" lay-search=\"\">\n" +
                "                    <option value=\"\">请选择类型</option>\n" +
                <c:forEach items="${peopleTypeList}" var="aa">


                "                    <option value=\"${aa.id}\">${aa.personType}</option>\n" +
                </c:forEach>
                "                </select>\n" +
                "            </div>\n" +
                "        <label class=\"layui-form-label\">票种</label>\n" +
                "        <div class=\"layui-input-inline\">\n" +
                "            <select name=\"ticket_types\" lay-verify=\"required\" lay-search=\"\">\n" +
                "                <option value=\"\">请选择票种</option>\n" +
                <c:forEach items="${ticket_typeList}" var="piaozhong">
                "                <option value=\"${piaozhong.id}\">${piaozhong.typeName}</option>\n" +
                </c:forEach>
                "            </select>\n" +
                "        </div>\n" +
                "        <label class=\"layui-form-label\">取票方式</label>\n" +
                "        <div class=\"layui-input-inline\">\n" +
                "            <select name=\"method\" lay-verify=\"required\" lay-search=\"\">\n" +
                "                <option value=\"\">请选择取票方式</option>\n" +
                <c:forEach items="${ticket_methodList}" var="method">
                "                <option value=\"${method.id}\">${method.name}</option>\n" +
                </c:forEach>
                "            </select>\n" +
                "        </div>" +
                "<div class=\"layui-input-inline\">\n" +
                "            <span class=\"layui-btn layui-btn-danger\" onclick=\"delTtpe(this)\" ><i class=\"layui-icon\"></i> 删除</span>\n" +
                "        </div>\n" +
                "        \n" +
                "    </div>";
            $("#ticketType").append(item);
            form.render();
        });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            // return false;
            $.ajax({
                url: '/shop/saveCommodity',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: $("#myForm").serialize(),
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                beforeSend: function (xhr) {
                    /*console.log(xhr)
                     console.log('发送前')*/
                },
                success: function (data) {
                    console.log(data);
                    if(data.result){
                        layer.msg("保存成功")
                        setTimeout(function () {
                            window.parent.location = window.parent.location.href

                        },1000)

                    }else {
                        layer.msg("发布失败")
                    }

                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete: function () {
                    //console.log('结束')
                }
            });
            return false;
        });
    });
    //删除商品类型
    function delTtpe(th){
        $(th).parent().parent().remove();

    }
    /**
     * 项目路径
     */

    function getPath(){
        //获取当前网址，如： http://localhost:80/ybzx/index.jsp
        var curPath=window.document.location.href;
        //获取主机地址之后的目录，如： ybzx/index.jsp
        var pathName=window.document.location.pathname;
        var pos=curPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:80
        var localhostPaht=curPath.substring(0,pos);
        //获取带"/"的项目名，如：/ybzx
        var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
        //return(localhostPaht+projectName);
        var path2= localhostPaht+projectName;
        return localhostPaht;
    }
</script>


</body>
<script type="text/javascript" src="/admin/js/qiniu.js"></script>
</html>
